<template>
  <div id="app">
    <div class="charsle-left">
      <div class="sidebar animated fadeInDown">
        <div class="logo-title">
          <div class="title"><img src="/static/images/logo.jpeg" style="width:127px;border-radius:50%;">
            <h3 title="">
              <a href="/" class="admin-name">charsle</a>
            </h3>
            <div class="description">
              <p>一个关注技术与人文的IT博客</p>
            </div>
          </div>
        </div>
        <ul class="social-links">
          <li>
            <a href="http://weibo.com/iweb8" target="_blank">
              微博
            </a>
          </li>
          <li>
            <a href="http://facebook.com/charsle.cai.3" target="_blank">
              facebook
            </a>
          </li>
          <li>
            <a href="http://github.com/charsle" target="_blank">
              github
            </a>
          </li>
          <li>
            <a href="http://gitee.com/charsle" target="_blank"> 码云</a>
          </li>
        </ul>
        <div class="footer">
          <a target="_blank" href="/">
            <span> </span>
          </a>
          <a href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action" target="_blank">渝ICP备16004561号 </a>
          <span> </span><br>
          <div class="by_farbox">
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50011302000738" target="_blank"> <img src="/static/images/beian.png">&nbsp;渝公网安备 50011302000738号</a>
          </div>
        </div>
      </div>
    </div>
    <div class="charsle-right">
      <charsle-header></charsle-header>
      <div id="mainbody">
        <router-view/>
        <div id="show-loading">
          <div>
          <div id="colorfulPulse">
            <span class="item-1"></span>
            <span class="item-2"></span>
            <span class="item-3"></span>
            <span class="item-4"></span>
            <span class="item-5"></span>
            <span class="item-6"></span>
            <span class="item-7"></span>
          </div>
          <span style="color:#fff;">努力加载中....</span>
          </div>
        </div>
      </div>
      <!-- <charsle-footer></charsle-footer> -->

    </div>
  </div>
</template>

<script>
import charsleHeader from "@/components/common/header";
import charsleFooter from "@/components/common/footer";
export default {
  name: "App",
  components: {
    charsleHeader,
    charsleFooter
  },
  data() {
    return {
    }
  },
  mounted() {
    this.initHeight();
    window.onresize = () => {
      this.initHeight();
    }
    let arrList = ['javascript', 'html', 'css2', 'css5', 'html5', 'nodeJS', 'jquey', 'vue', 'react', 'angar']
    // document.addEventListener('click', (e) => {
    //   let showDiv = document.querySelector('#tipDiv')
    //   if (showDiv) {
    //     showDiv.style.position='absolute'
    //     showDiv.style.top = e.pageY;
    //     showDiv.style.left = e.pageX;
    //     showDiv.innerHTML = arrList[parseInt(Math.random() * 10)]
    //   } else {
    //     let tipDiv = document.createElement('div');
    //     tipDiv.setAttribute('id', 'tipDiv');
    //     tipDiv.innerHTML = arrList[parseInt(Math.random() * 10)]
    //     document.body.appendChild(tipDiv);
    //     tipDiv.style.top = e.pageY;
    //     tipDiv.style.left = e.pageX;
    //   }
    // }, false)
  },
  methods: {
    initHeight() {
      var client_width = document.documentElement.clientWidth || document.body.clientWidth;
      var client_height = document.documentElement.clientHeight || document.body.clientHeight;
      var right = document.querySelectorAll('.charsle-right')[0];
      var left = document.querySelectorAll('.charsle-left')[0];
      var homeRight = document.querySelector('#mainbody');

      right.style.height = client_height + 'px'
      right.style.width = client_width - 300 + 'px'
      left.style.height = client_height + 'px'
      homeRight.style.height = client_height - 70 + 'px'
      homeRight.style.overflow = 'auto';

    }
  },
};
</script>

<style>
.admin-name{
  color: #409eff!important;
  text-shadow: -1px 2px #fff,-1px -1px #444
}
.description{
  margin-top: 10px;
}
#mainbody {
  position: relative;
  overflow: hidden;
}
html,
body {
  overflow: hidden;
}
#app {
  min-width: 1360px;
}
.charsle-left {
  float: left;
  width: 300px;
  position: relative;
  z-index: 10000;
}
.charsle-right {
  float: left;
  overflow: auto;
}
#tipDiv {
  position: absolute;
  color: #f00;
}

.box-desc {
  margin-top: 20px;
  border-left: 4px solid #409eff;
  padding: 15px;
  background: #fbfbfb;
}
#show-loading{
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  top:71px;
  left: 200px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.3)
}
#colorfulPulse {
  width: 200px;
  /* height: 80px; */
  margin: 0 auto;
}

#colorfulPulse span {
  display: inline-block;
  width: 10px;
  height: 40px;
  animation-name: scale;
  -webkit-animation-name: scale;
  -moz-animation-name: scale;
  -ms-animation-name: scale;
  -o-animation-name: scale;
  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -ms-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}
span.item-1 {
  background: #2ecc71;
}
span.item-2 {
  background: #3498db;
}
span.item-3 {
  background: #9b59b6;
}
span.item-4 {
  background: #e67e22;
}
span.item-5 {
  background: #c0392b;
}
span.item-6 {
  background: #e74c3c;
}
span.item-7 {
  background: #e74c8c;
}

.item-1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
  -moz-animation-delay: -1s;
  -ms-animation-delay: -1s;
  -o-animation-delay: -1s;
}

.item-2 {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
}

.item-3 {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -ms-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
}

.item-4 {
  animation-delay: -0.7s;
  -webkit-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  -ms-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
}

.item-5 {
  animation-delay: -0.6s;
  -webkit-animation-delay: -0.6s;
  -moz-animation-delay: -0.6s;
  -ms-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
}

.item-6 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  -ms-animation-delay: -0.5s;
  -o-animation-delay: -0.5s;
}

.item-7 {
  animation-delay: -0.4s;
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -ms-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
}

@-webkit-keyframes scale {
  0%,
  40%,
  100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%,
  60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes scale {
  0%,
  40%,
  100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%,
  60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-ms-keyframes scale {
  0%,
  40%,
  100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%,
  60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes scale {
  0%,
  40%,
  100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%,
  60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
</style>
